<!-- 手机验证 -->
<template>
  <div class="home" style="height: 100vh">
    <div id="container"></div>
    <img
      class="location"
      @click="setCenter()"
      src="../../images/icon_location1@2x.png"
    />
    <div class="unlockUI">
      <div class="unlockTitle">
        <img class="customNoImg" src="../../images/customNo.png" />
        <div class="customnoTxt">车辆编号：{{ carInfo.customno }}</div>
      </div>

      <div class="readyUnlock" v-if="!getVehicleStatus">
        <img class="loadingImg" src="../../images/loading.png" />
        <div class="readyTxt">正在获取车辆信息...</div>
      </div>

      <div class="normalUnlock" v-if="getVehicleStatus">
        <div class="unlockArea">
          <img class="unlockPark" src="../../images/parkIcon.png" />
          <div style="line-height: 0.5rem; text-align: left">
            <div class="unlockTxt_title">{{ ridingText }}</div>
            <div class="unlockTxt">
              <div>{{ returnText }}</div>
              <div
                style="color: #ff6e2a; margin-left: 0.16rem"
                catchtap="goRule"
              >
                收费规则>
              </div>
            </div>
          </div>
        </div>
        <div class="unlockAreaBottom">
          <div class="unlockMileage" v-if="carInfo.mileage">
            <div>预计剩余续航里程</div>
            <div style="font-size: 0.52rem; color: #ff6e2a; margin: 0 0.08rem">
              {{ carInfo.mileage || "未知" }}
            </div>
            <div>km</div>
          </div>
          <div class="unlockMileage" v-else>
            <div>未获取到剩余续航里程</div>
          </div>
          <div style="font-size: 0.28rem; color: #a4a4a4">
            点击开锁即表示同意运营区域内定点还车
          </div>
          <div class="unlockButtonArea">
            <div class="unlockCancel" @click="back">换一辆</div>
            <div class="unlockConfirm" v-if="!unlockStatus" @click="unlockCar">
              同意并开锁
            </div>
            <div class="unlockConfirm" style="opacity: 0.4" v-if="unlockStatus">
              开锁中
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import readyUnlock from "./readyUnlock.js";
export default {
  mixins: [readyUnlock],
  data() {
    return {};
  },
};
</script>

<style scoped lang="stylus">
@import './readyUnlock.styl';
</style>
